<template>
  <div id="side-bar-inner">
    <div class="avatar">
      <img :src="userInfo.avatar" alt=""/>
    </div>
    <p class="username">{{userInfo.username}}</p>
    <div class="blog-size">
      <p style="color: #a6a6c4">{{blogSize}}</p>
      <p style="color: #222222">日志</p>
    </div>
  </div>
</template>

<script>
import {getUserDetail} from "@/network/userRequest";
import {getBlogSize} from "@/network/blogRequest";

export default {
  name: "SiderBarInner",
  data() {
    return {
      userInfo: {},
      blogSize: ''
    }
  },
  methods: {
    getUserDetail() {
      getUserDetail().then(res => {
        this.userInfo = res.data;
        this.userInfo.avatar = "data:image/jpg;base64, " + res.data.avatar;
      })
    },
    getBlogSize() {
      getBlogSize().then(res => {
        this.blogSize = res.data;
      })
    }
  },
  created() {
    this.getUserDetail();
    this.getBlogSize();
  }
}
</script>

<style scoped>
  #side-bar-inner {
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom:  1px solid #d5d5d5;
    padding: 20px 0;
    box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.3);
  }

  #side-bar-inner .avatar {
    margin: 0 55px 5px 55px;
    padding: 2px;
    border: 1px solid #d5d5d5;
  }

  #side-bar-inner img {
    width: 100%;
  }

  #side-bar-inner .username {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }

  #side-bar-inner .blog-size {
    /*margin-left: 25%;*/
    margin: 15px auto;
  }

  #side-bar-inner .blog-size p {
    margin: 5px;
    text-align: center;
  }
</style>